Exercise: Add Material Colors

L10 28 Colors SC

Now it's your turn to complete this exercise yourself!

In this exercise you'll use colors more effectively to dramatically improve the usability of your app.

Before diving into code, explore the material Color Tool. Select your favorite palette on the User Interfaces panel, then use the Accessibility tab to make sure it’s legible.

Follow the steps to generate your own palette, or just use the colors we’ve provided below.

1. Browse to the material.io color tool and select your color palette.

2. Choose Export->Android at the top of the screen to download colors.xml.

3. Copy colors.xml into the res/values directory.

4. If you prefer, you can always use our color palette.

Add our suggested colors to colors.xml.

  <color name="primaryColor">#669df6</color>
  <color name="primaryLightColor">#9cceff</color>
  <color name="primaryDarkColor">#266fc3</color>
  <color name="secondaryColor">#a142f4</color>
  <color name="secondaryLightColor">#d774ff</color>
  <color name="secondaryDarkColor">#6b00c0</color>
  <color name="primaryTextColor">#000000</color>
  <color name="secondaryTextColor">#ffffff</color>

5. Apply colors to your app's theme.

In styles.xml, add your colors to AppTheme:

<item name="colorPrimary">@color/primaryColor</item>
<item name="colorPrimaryDark">@color/primaryDarkColor</item>
<item name="colorPrimaryVariant">@color/primaryLightColor</item>
<item name="colorOnPrimary">@color/primaryTextColor</item>
<item name="colorSecondary">@color/secondaryColor</item>
<item name="colorSecondaryVariant">@color/secondaryDarkColor</item>
<item name="colorOnSecondary">@color/secondaryTextColor</item>

Run the app to see your new Material color palette!

If you want to start at this step, you can download this exercise from: Step.07-Exercise-Add-Material-Colors.

You will find plenty of //TODO comments to help you complete this exercise, and if you get stuck, go back and watch the video again.

Once you’re done, you can check your solution against the solution we’ve provided here: Step.07-Solution-Add-Material-Colors, or using this git diff.

Task Description:

Complete the following tasks to apply Material colors consistently in your app.

Task Feedback:

You're doing great! Don't you love all those pretty colors!

Reference documentation